<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<title>页面</title>
<link rel="shortcut icon" href="./favicon.ico" />
<script type="text/javascript" src="jquery.js" ></script>
<style type="text/css" media="screen">
<!--
/*    @import url(./screen.css);*/
body{
	font: 12px/1.5 Lucida Grande, Lucida Sans Unicode, helvetica, verdana, sans-serif;
}

li{
	list-style: none;
	padding: 0 0 0 20px;
	display: block;
}

li.open{
	background: url(folder_open.png) no-repeat;
}

li.close{
	background: url(directory.png) no-repeat;
}

ul{
	padding: 0;
}

a{
	text-decoration: none;
	color: #333333;
}

a:hover{
	background: #BBDDFF;
}

#present{
	position: relative;
}

div{
    border: 1px solid black;
    width: 300px;
}
-->
</style>
<script type="text/javascript">
//<!--
window.onload = function(){
	var lis = document.getElementsByTagName('li');
	var len = lis.length;
	var present = document.getElementById('present');

	while(len --){
		if (lis[len].getElementsByTagName('ul').length)
		{
			lis[len].className = 'open';
		}
		else{
			lis[len].className = 'close';
		}
	}


	document.getElementsByTagName('div')[0].onclick = function(e){
		var evt = e || window.event;
		var src = evt.target || evt.srcElement;

		if (src.nodeName != 'A')
		{
			return false;
		}

		var uls = src.parentNode.getElementsByTagName('ul');
		
		if (uls.length)
		{
			if ('none' != uls[0].style.display)
			{
				$(uls[0]).slideUp();
				//uls[0].style.display = 'none';
				src.parentNode.className = 'close';
			}
			else{
				$(uls[0]).slideDown();
				//uls[0].style.display = 'block';
				src.parentNode.className = 'open';
			}
		}
		present.innerHTML = src.innerHTML + ' clicked!';
        return false;
	}
}
//-->
</script>
</head>
<body>
<div>
<?php
    $nav = '[[[],[],[[],[],[]],[]],[[[],[[],[[],[],[]],[]],[]],[[],[],[]],[],[],[]],[[],[],[]],[]]';
    $nav = json_decode($nav);
//    print "<pre>";
//    print_r($nav);
//    die;
    $cnt = 0;
    function gen($arr, &$cnt){
        $l = '<ul>';
        foreach($arr as &$value){
            $l .= '<li>';
            $l .= '<a href="#">' . ++$cnt . '</a>';
            if (0 != count($value)) $l .= gen($value, $cnt);
            $l .= '</li>';
        }
        $l .= '</ul>';
        return $l;
    }
    print gen($nav, $cnt);
?>
<div id="present">
happy
</div>
</div>
</body>
</html>